<template>
  <div>
    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :immediate-check='false'>

      <van-cell v-for='data in datalist'
                :key='data.filmId'
                @click='handleClick(data.filmId)'>

        <div style="width:270px;float:left;">
          <img :src="data.poster"
               alt="">
          <span class="title"> {{data.name}}<span class="smallTitle">{{data.filmType.name}}</span></span>
          <div class="content">
            <div class="actors">主演:{{data.actors | actorsFiler}}</div>
            <div>上映日期:{{data.premiereAt | showtime}}</div>
          </div>
        </div>
        <van-button plain
                    hairline
                    size="small"
                    type="info">预约</van-button>
      </van-cell>

    </van-list>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import http from '@/util/http.js'

// 用过滤器做出周几上映和几月几号
Vue.filter('showtime', ((premiereAt) => {
  var date = new Date(premiereAt * 1000)
  var month, day
  var weekday = new Array(7);
  weekday[0] = "周日";
  weekday[1] = "周一";
  weekday[2] = "周二";
  weekday[3] = "周三";
  weekday[4] = "周四";
  weekday[5] = "周五";
  weekday[6] = "周六";

  month = Number(date.getMonth() + 1)
  day = Number(date.getDate())
  var time = month + '月' + day + '日'
  var week = weekday[date.getDay()] + '  ' + time;
  return week
}))
export default {
  data () {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current: 1,
      total: 0,
    }
  },
  methods: {
    onLoad () {
      // 总长度匹配,数据真正到底就禁用懒加载，懒加载，vue-cli list文档懒加载
      console.log('到底了')
      console.log(this.datalist.length, this.total)
      if (this.datalist.length === this.total && this.total != 0) {
        console.log(1)
        this.finished = true
        return
      }

      this.current++

      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=3843052`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list',

        }
      }).then((res) => {

        // console.log(res.data.data.films)

        this.datalist = this.datalist.concat(res.data.data.films)
        this.loading = false

      })


    },
    // 点击详情页路由动态传参
    handleClick (id) {
      // location.href='#/detail'
      // 在vue可以用下面这个

      // 路径跳转
      // this.$router.push(`/detail/${id}`)
      // 命名跳转     命名路由不用传参的话，那就不用params了
      this.$router.push({
        name: 'detailName',
        params: {
          id: id
        }
      })
    }


  },
  mounted () {
    // 加载完成后加载卖座的正在上映的数据
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=2&k=3843052`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list',

      }
    }).then((res) => {

      console.log(res.data.data.films)
      this.datalist = res.data.data.films
      // console.log(this.datalist.length)

      this.total = res.data.data.total
    })
  },
  // 这个不知道有没有用，但是为了防止跟另一个滚动条库起冲突就加了这个
  destroyed () {
    window.scroll = null
  },
}
</script>
<style lang="scss" scoped>
.van-list {
  .van-cell {
    overflow: hidden;
    padding: 0.9375rem;
    img {
      float: left;
      width: 4.0625rem;
    }
    .title {
      font-size: 15px;
    }
    .content {
      font-size: 13px;
      color: gray;
      .actors {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; //超出字数省略号
        width: 200px;
      }
    }
  }
}
// 2d
.smallTitle {
  font-size: 9px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px;
  margin: 2px;
}
// 按钮
.van-button {
  position: absolute;
  top: 30px;
  right: 0px;
}
</style>